<%--
  Created by IntelliJ IDEA.
  User: A
  Date: 2020/12/16
  Time: 8:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>

    <style type="text/css">

        .div{
            display:none;
            border:1px solid ;
            height:40%;
            width:30%;
            position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
            top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
            left:24%;
            z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
            background: white;
        }

        .div1{
            width: 100%;
            height: 100%;
            opacity:0.3;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/
            filter:alpha(opacity=80);
            display: none;
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            background-color: rgb(0,0,0);
        }
    </style>

</head>
<body>
        <div style="display: flex;margin-left: 27%">
            <form action="/se" method="post" class="layui-inline">
                <input type="hidden" name="type" value="2">
                供应商<input type="text" placeholder="请输入" name="name" value="">
                业务员<input type="text" placeholder="请输入" name="uid" value="">
                <input type="submit" value="查询" style="background-color: #00feff">
            </form>

            <input type="button" value="添加" id="tianjiab" style="background-color: #50fa7b;height: 26px" >
            <input type="button" value="修改" id="xiugaib" style="background-color: #50fa7b;height: 26px" onclick="f2()">
            <input type="button" value="删除" id="shanchub" style="background-color: #50fa7b;height: 26px" onclick=f1()>

        </div>
        <table class="table table-striped">
            <caption></caption>
            <thead>
            <tr>
                <th></th>
                <th>序号</th>
                <th>业务员</th>
                <th>供应商名称</th>
                <th>电话</th>
                <th>微信或qq</th>
                <th>商品关联状态</th>
                <th>创建时间</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="item" items="${arr}">
              <c:if test="${item.status=='0'}">
                    <tr style="background-color: #50fa7b">
              </c:if>
              <c:if test="${item.status=='1'}">
                    <tr style="background-color: red">
              </c:if>
                <td><input type="radio" name="name" value="${item.gid}"></td>
                <td>AH0${item.gid}</td>
                <td>${item.user_name}</td>
                <td>${item.name}</td>
                <td>${item.phone}</td>
                <td>${item.wechat}</td>
              <c:if test="${item.status=='0'}">
                <td>未关联</td>
              </c:if>
              <c:if test="${item.status=='1'}">
                <td>已关联</td>
              </c:if>
                <td>${item.create_time}</td>
                <td>${item.remark}</td>
            </tr>
            </c:forEach>
            </tbody>
        </table>

        <script>

            $(function () {
                //添加点击事件  点击添加按钮开启div
                $("#tianjiab").click(function () {
                    $("#tianjia").show();
                    $("#tianjia1").show();
                })
                //添加点击事件  点击关闭按钮关闭div
                $("#guanbi").click(function () {
                    $("#tianjia").hide();
                    $("#tianjia1").hide();
                })
                //修改
                $("#xiugaib").click(function () {
                    //判断有没有点击到单选框
                    var del = $("input[name='name']:checked").val();
                    if (del == undefined) {
                        alert("请选择一行数据");
                        return;
                    }
                    $("#xiugai").show();
                    $("#tianjia1").show();
                })
                $("#guanbi1").click(function () {
                    $("#xiugai").hide();
                    $("#tianjia1").hide();
                })

                //删除按钮
                $("#shanchub").click(function () {
                    //判断有没有点击到单选框
                    var del = $("input[name='name']:checked").val();
                    if (del == undefined) {
                        alert("请选择一行数据");
                        return;
                    }
                    $("#xiugai").show();
                    $("#tianjia1").show();
                })

            })


            //修改ajax发送数据
            function f() {

                var name=$("#name").val();
                var phone=$("#phone").val();
                var wechat=$("#wechat").val();
                var create_time=$("#create_time").val();
                var remark=$("#remark").val();
                var gid=$("input[name='name']:checked").val();

                if(""==$("#name").val() || ""==$("#phone").val() ||
                    ""==$("#wechat").val() || ""==$("#remark").val()){
                    alert("不能为空");
                    return;
                }


                var data={
                    "name":name,
                    "phone":phone,
                    "wechat":wechat,

                    "remark":remark,
                    "type":4,
                    "gid":gid
                }
                $.ajax({
                    url:"/se", //地址
                    type:"post",                          //请求方式
                    data:data,                         //参数
                    dataType:"text",

                    success:function (data,status) {
                        if(status=="success") {
                            console.log("成功了789");
                            $("#xiugai").hide();
                            $("#tianjia1").hide();
                            window.location.href="/se?type=1";
                        }
                    },
                    error:function (jqxhr,textStatus,error) {
                        console.log("报错了");
                        console.log(error);
                    }
                })
            }

            //删除 ajax
            function f1() {

                var gid=$("input[name='name']:checked").val();

                var data={
                    "type":5,
                    "gid":gid
                }
                $.ajax({
                    url:"/se", //地址
                    type:"get",                          //请求方式
                    data:data,                         //参数
                    dataType:"text",

                    success:function (data,status) {
                        if(status=="success") {
                            console.log("成功了789");
                            window.location.href="/se?type=1";
                        }
                    },
                    error:function (jqxhr,textStatus,error) {
                        console.log("报错了");
                        console.log(error);
                    }
                })
            }

            //id ajax
            function f2() {

                var gid=$("input[name='name']:checked").val();

                var data={
                    "type":6,
                    "gid":gid
                }
                $.ajax({
                    url:"/se", //地址
                    type:"get",                          //请求方式
                    data:data,                         //参数
                    dataType:"json",

                    success:function (data,status) {
                        if(status=="success") {
                            $("#name").val(data.name);
                            $("#phone").val(data.phone);
                            $("#wechat").val(data.wechat);
                            $("#remark").val(data.remark);
                            console.log("成功了789");

                        }
                    },
                    error:function (jqxhr,textStatus,error) {
                        console.log("报错了");
                        console.log(error);
                    }
                })
            }
        </script>
     <!--添加-->
    <div class="div" id="tianjia" hidden="hidden" style="height: 50vh;overflow-y: scroll">
        <form action="/se" method="post">
            <table>
                <tr>
                    <td><input type="hidden" name="type" value="3"></td>
                </tr>
                <tr>
                    <td><p>信息</p></td>
                </tr>
                <tr>
                    <td>供应商名称:</td>
                    <td><input  placeholder="请输入名称" name="name" value="" required></td>
                </tr>
                <tr>
                    <td style="padding-left: 48px;">电话:</td>
                    <td><input  placeholder="请输入电话" name="phone" value="" required></td>
                </tr>
                <tr>
                    <td style="padding-left: 14px;">微信或qq:</td>
                    <td><input  placeholder="请输入微信或qq" name="wechat" value="" required></td>
                </tr>
                <tr>
                    <td><p>备注:</p></td>
                    <td><textarea name="remark" value="" style="height: 108px; margin: 0px; width: 202px;" required></textarea></td>
                </tr>
                <tr>
                    <td><input type="submit" value="立即提交"></td>
                    <td><input type="button" value="关闭" id="guanbi"></td>
                </tr>
            </table>

        </form>
    </div>

     <!--修改-->
    <div class="div" id="xiugai" hidden="hidden" style="height: 50vh;overflow-y: scroll">

                <table>

                    <tr>
                        <td><p>信息</p></td>
                    </tr>
                    <tr>
                        <td>供应商名称:</td>
                        <td><input name="name" value="" id="name"></td>
                    </tr>
                    <tr>
                        <td style="padding-left: 48px;">电话:</td>
                        <td><input name="phone" value="" id="phone"></td>
                    </tr>
                    <tr>
                        <td style="padding-left: 14px;">微信或qq:</td>
                        <td><input name="wechat" value="" id="wechat"></td>
                    </tr>
                    <tr>
                        <td><p>备注:</p></td>
                        <td><textarea name="remark" value="" style="height: 108px; margin: 0px; width: 202px;" id="remark"></textarea></td>
                    </tr>
                    <tr>
                    <td><input type="button" value="立即提交" onclick=f()></td>
                    <td><input type="button" value="关闭" id="guanbi1"></td>
                </tr>

                </table>

    </div>

    <div class="div1" hidden="hidden" id="tianjia1"></div>


</body>
</html>
